<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TagCloud - TagCloud generator</title>
<link rev="made" href="mailto:root@localhost" />
</head>

<body style="background-color: white">

<p><a name="__index__"></a></p>
<!-- INDEX BEGIN -->

<ul>

	<li><a href="#name">NAME</a></li>
	<li><a href="#synopsis">SYNOPSIS</a></li>
	<li><a href="#description">DESCRIPTION</a></li>
	<li><a href="#control_flow">CONTROL FLOW</a></li>
	<ul>

		<li><a href="#prepare_generator">PREPARE GENERATOR</a></li>
		<li><a href="#add_parameters">ADD PARAMETERS</a></li>
		<li><a href="#load_effectors">LOAD EFFECTORS</a></li>
		<ul>

			<li><a href="#countsize">CountSize</a></li>
			<li><a href="#datetimecolor">DateTimeColor</a></li>
			<li><a href="#hotword">HotWord</a></li>
		</ul>

		<li><a href="#setup_tagcloud_into_your_html_element">SETUP TAGCLOUD INTO YOUR HTML ELEMENT</a></li>
	</ul>

	<li><a href="#author">AUTHOR</a></li>
	<li><a href="#copyright">COPYRIGHT</a></li>
</ul>
<!-- INDEX END -->

<hr />
<p>
</p>
<hr />
<h1><a name="name">NAME</a></h1>
<p>TagCloud - TagCloud generator</p>
<p>
</p>
<hr />
<h1><a name="synopsis">SYNOPSIS</a></h1>
<pre>
  &lt;html&gt;
  &lt;head&gt;
  ...
  &lt;script type=&quot;text/javascript&quot; src=&quot;prototype.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;tagcloud.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  &lt;!--
  Event.observe(window, 'load', function(){</pre>
<pre>
    var tc = TagCloud.create();</pre>
<pre>
    tc.add('perl', 40, '<a href="http://www.perl.org">http://www.perl.org</a>', Date.parse(&quot;1998/10/20 00:00:00&quot;));
    tc.add('ruby', 20, '<a href="http://www.ruby-lang.org">http://www.ruby-lang.org</a>', Date.parse(&quot;2000/04/30 00:00:00&quot;));
    tc.add('python', 50, '<a href="http://www.python.org">http://www.python.org</a>', Date.parse(&quot;2002/05/12 00:00:00&quot;));
    tc.add('php', 25, '<a href="http://www.php.net">http://www.php.net</a>', Date.parse(&quot;2003/07/10 00:00:00&quot;));</pre>
<pre>
    tc.loadEffector(&quot;CountSize&quot;);
    tc.loadEffector(&quot;DateTimeColor&quot;);
    tc.loadEffector(&quot;HotWord&quot;).words('perl');</pre>
<pre>
    tc.setup('mytagcloud');
  });
  //--&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id=&quot;mytagcloud&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</pre>
<p>
</p>
<hr />
<h1><a name="description">DESCRIPTION</a></h1>
<p>This library allows you to make tagclouds easily.</p>
<p>
</p>
<hr />
<h1><a name="control_flow">CONTROL FLOW</a></h1>
<p>
</p>
<h2><a name="prepare_generator">PREPARE GENERATOR</a></h2>
<p>Create generator first, and if you need, change setting.</p>
<pre>
  var tc = TagCloud.create();</pre>
<p>
</p>
<h2><a name="add_parameters">ADD PARAMETERS</a></h2>
<p>Add parameters with ``add'' method.</p>
<pre>
  tc.add(name, count, url [,date]);</pre>
<p>Date is needed  when you use DateTimeColor effector (I describe about this effector later),
and this should be JavaScript Date object.</p>
<p>So, with Date.parse or Date.UTC, set them like...</p>
<pre>
  tc.add('mytag', 20, '<a href="http://dummy.com/">http://dummy.com/</a>', Date.parse(&quot;2006/05/01 00:00:00&quot;)); 
  tc.add('mytag2', 10, '<a href="http://dummy2.com/">http://dummy2.com/</a>', Date.UTC(2006, 10, 30, 0, 0, 0));</pre>
<p>
</p>
<h2><a name="load_effectors">LOAD EFFECTORS</a></h2>
<p>Before generate tagcloud, you can choose your favorite effector.</p>
<pre>
  tc.loadEffector(&quot;EffectorName&quot;);</pre>
<p>Now three effectors are implemented.</p>
<p>
</p>
<h3><a name="countsize">CountSize</a></h3>
<p>Change tag size by count you passed.</p>
<pre>
  var countSizeEffector = tc.loadEffector(&quot;CountSize&quot;);</pre>
<p>and you can change basic font-size, and range.</p>
<pre>
  countSizeEffector.base(36);
  countSizeEffector.range(10);</pre>
<p>In this case, tags' size are between 26 and 46.</p>
<p>And you also can them in one line.</p>
<pre>
  tc.loadEffector(&quot;CountSize&quot;).base(36).range(10);</pre>
<p>When you don't set options. Base font-size becomes 24, range becomes 12.</p>
<p>
</p>
<h3><a name="datetimecolor">DateTimeColor</a></h3>
<p>Change tag color by how it is older.</p>
<pre>
  var dateTimeColorEffector = tc.loadEffector(&quot;DateTimeColor&quot;);</pre>
<p>The tags will be attached date-type, by the date you passed with 'add' method.
There are 4 types, 'earliest', 'earlier', 'later', 'latest'.
And they have each specific colors.</p>
<p>Of couse, you can change default color.</p>
<pre>
  dateTimeColorEffector.earliest('#00ffcc');
  dateTimeColorEffector.earlier('#22ffcc');
  dateTimeColorEffector.later('#88ffcc');
  dateTimeColorEffector.latest('#33ffcc');</pre>
<p>You can write them in one line.</p>
<pre>
  tc.loadEffector('DateTimeColor').earliest('#000').earlier('#333').later('#999').latest('#CCC');</pre>
<p>
</p>
<h3><a name="hotword">HotWord</a></h3>
<p>Change tag color by name.</p>
<pre>
  var hotWordEffector = tc.loadEffector('HotWord');</pre>
<p>Set the tag name you want change its color.</p>
<pre>
  hotWordEffector.words('word1', 'word2', 'word3');</pre>
<p>And set color. By default it becomes red.</p>
<pre>
  hotWordEffector.color('#000');</pre>
<p>This can be written in one line, too.</p>
<pre>
  tc.loadEffector('HotWord').words('word1', 'word2').color('#CCC');</pre>
<p>
</p>
<h2><a name="setup_tagcloud_into_your_html_element">SETUP TAGCLOUD INTO YOUR HTML ELEMENT</a></h2>
<p>Generate tagcloud into you html element.
You have to make the element, before processing this method.
Using Event.observe (prototype.js) is one of the solutions.</p>
<pre>
  tc.setup('elementName');</pre>
<p>
</p>
<hr />
<h1><a name="author">AUTHOR</a></h1>
<p>Lyo Kato, <code>lyo.kato@gmail.com</code></p>
<p>
</p>
<hr />
<h1><a name="copyright">COPYRIGHT</a></h1>
<p>Copyright (c) 2006, Lyo Kato. All rights reserved.</p>
<p>This program is free software; you can redistribute it and/or modify
it under the MIT License</p>

</body>

</html>
